﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="css/comment/main.css"/>
    <link rel="stylesheet" type="text/css" href="css/comment/comment.css"/>
    <link rel="stylesheet" type="text/css" href="css/comment/sinaFaceAndEffec.css"/>
    <link rel="stylesheet" type="text/css" href="css/my_common.css"/>

    <title>景点点评</title>

    <style>
        .imgFileUploade .header span.imgClick {
            width: 50px;
            height: 50px;
            margin-left: 10px;
            cursor: pointer;
            background: url("images/comment/addUpload.png") no-repeat center center;
            background-size: cover;
        }

        body, ul, li {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
            float: left;
        }

        .rating {
            width: 300px;
            height: 26px;
            margin: 100px auto;
        }

        .rating-item {
            float: left;
            width: 50px;
            height: 50px;
            background: url("images/comment/star.png") no-repeat;
            -webkit-background-size: 50px 100px;
            background-size: 50px 100px;
            background-position: 0 -58px;
            overflow: hidden;
            margin-left: 10px;
        }
    </style>
</head>
<body>



<div style="width: 1200px; padding: 15px; background: white;height: 673px;margin: 0 auto;">
    <span style="height: 30px; width: 2px;background: #ff7742;float: left;margin-top: 5px;"></span>
    <strong style="font-size: 28px;color: #6e91cf;margin-left: 10px">用户点评</strong>
    <a href="user_center/user_center.jsp" class="btn2" style="margin-left: 900px;position:relative;font-size: 16px;">返回我的订单</a>
    <ul class="rating" id="rating" style="width: 863px;margin-left: 200px;">
        <li style="margin-top: 10px;"><h2>评分：</h2></li>
        <li class="rating-item" title="很不好"></li>
        <li class="rating-item" title="不好"></li>
        <li class="rating-item" title="一般"></li>
        <li class="rating-item" title="好"></li>
        <li class="rating-item" title="很好"></li>
    </ul>

    <div id="content" style="width: 810px; height: auto;margin-left: 190px;">
        <div class="wrap">
            <div class="comment">
                <div class="head-face">
                    <img src='${user.headImg}'/>
                    <p style="margin-left: -30px;">${user.nickName}</p>
                </div>
                <div class="content">
                    <div class="cont-box">
                        <textarea class="text" placeholder="请输入..."></textarea>
                    </div>
                    <div class="tools-box">
                        <div class="operator-box-btn"><span class="face-icon">☺</span>
                        </div>
                        <div class="submit-btn"><input type="button" onClick="submit()" value="提交点评"/></div>
                    </div>
                </div>
            </div>
            <div id="info-show">
                <ul></ul>
            </div>
        </div>
    </div>

    <!-- 上传图片 -->
    <ul style="margin-left: 270px;margin-top: 160px;position: absolute;">
        <li>
            <input type="button" class="btn2" value="上传图片+" onclick="chang_headImg('inputFile')" style="display: block;"
                   id="up_headImg"/>
            <img height="120" id="head_pic" width="120">
            <input type="file" id="inputFile" name="inputFile" style="display: none;"/>
        </li>
        <li>
            <input type="button" class="btn2" value="上传图片+" onclick="chang_headImg('inputFile1')" style="display: block;"
                   id="up_headImg1"/>
            <img height="120" id="head_pic1" width="120">
            <input type="file" id="inputFile1" name="inputFile" style="display: none;"/>
        </li>
        <li>
            <input type="button" class="btn2" value="上传图片+" onclick="chang_headImg('inputFile2')" style="display: block;"
                   id="up_headImg2"/>
            <img height="120" id="head_pic2" width="120">
            <input type="file" id="inputFile2" name="inputFile" style="display: none;"/>
        </li>
        <li>
            <input type="button" class="btn2" value="上传图片+" onclick="chang_headImg('inputFile3')" style="display: block;"
                   id="up_headImg3"/>
            <img height="120" id="head_pic3" width="120">
            <input type="file" id="inputFile3" name="inputFile" style="display: none;"/>
        </li>
        <li>
            <input type="button" class="btn2" value="上传图片+" onclick="chang_headImg('inputFile4')" style="display: block;"
                   id="up_headImg4"/>
            <img height="120" id="head_pic4" width="120">
            <input type="file" id="inputFile4" name="inputFile" style="display: none;"/>
        </li>
    </ul>

</div>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/comment/main.js"></script>
<script type="text/javascript" src="js/comment/sinaFaceAndEffec.js"></script>
<script type="text/javascript" src="js/getParameter.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript" src="js/comment/imgFileupload.js"></script>

<script>
    // 评分
    var num = 2;// 点亮个数
    $item = $('#rating').find('.rating-item');//获取的所有li
    //点亮星星函数
    var dianLiang = function (num) {
        $item.each(function (index) { //遍历所有li,即所有星星
            if (index < num) {
                $(this).css('background-position', '0 0') //点亮
            } else {
                $(this).css('background-position', '0 -58px') //未点亮
            }
        })
    }
    //    初始化,默认点亮2颗
    dianLiang(num)
    //    绑定事件
    $item.on('mouseover', function () {
        dianLiang($(this).index())
    }).on('click', function () {
        dianLiang($(this).index());
        num = $(this).index();
    })
    $('#rating').on('mouseout', function () {
        dianLiang(num)
    })

    // 图片上传


    // 绑定表情
    $('.face-icon').SinaEmotion($('.text'));

    // 提交点评
    function submit() {
        var comment = $('.text').val();
        var detailTypeId = getParameter("detailTypeId");
        var imgArr = "";

        var head_pic_src = $("#head_pic")[0].src;
        var head_pic_src1 = $("#head_pic1")[0].src;
        var head_pic_src2 = $("#head_pic2")[0].src;
        var head_pic_src3 = $("#head_pic3")[0].src;
        var head_pic_src4 = $("#head_pic4")[0].src;

        imgArr += head_pic_src + "&";
        imgArr += head_pic_src1 + "&";
        imgArr += head_pic_src2 + "&";
        imgArr += head_pic_src3 + "&";
        imgArr += head_pic_src4;

        // 将图片数组转化为json--这样才能发送
        // var jsonImgArr = JSON.stringify(imgArr);
        // 发起异步请求
        $.post("comment/submitComment", {
            detailTypeId: detailTypeId,
            startNum: num,
            imgArr: imgArr,
            comment: comment
        }, function (data) {
            if (data.flag) {
                layer.msg('点评成功！', {icon: 1, time: 1500});
            } else {
                layer.msg('出现问题，请重新点评！', {icon: 1, time: 1500});
            }
        });
    }


</script>

</body>
</html>

